<template>
    <div
        class="overPayment1"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="溢缴款转出">
            <template slot="cardBody">
                <div class="formContainer">
                    <!-- 搜索表单模块 -->
                    <el-form
                        class="searchForm"
                        ref="searchForm"
                        :model="searchForm"
                        label-position="right"
                        :rules="formRules"
                        :inline="true"
                        size="small"
                        label-width="150px"
                    >
                        <el-row class="text_center">
                            <el-col :span="11" :offset="1">
                                <el-form-item label="账户类别:" class="text_fl">
                                    <el-select
                                        v-model="searchForm.accountType"
                                        placeholder="请选择账户类别"
                                        clearable
                                        @change="changeCardList"
                                    >
                                        <el-option
                                            v-for="item in AccountionTYPE_INFO"
                                            :label="item.label"
                                            :value="item.code"
                                            :key="item.label"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="卡号:" class="text_fl">
                                    <el-select
                                        v-model="searchForm.cardno"
                                        placeholder="请选择卡号"
                                        clearable
                                    >
                                        <el-option
                                            v-for="item in cardList"
                                            :label="item.CARDNBR"
                                            :value="item.CARDNBR"
                                            :key="item.CARDNBR"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="text_center">
                            <el-col :span="11" :offset="1">
                                <el-form-item label="账面余额:" label-position="left">
                                    <el-input v-model="searchForm.OXFRAVALX" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <!-- <el-form-item label="跨行标志:" class="text_fl">
                                    <el-select
                                        v-model="searchForm.outFlag"
                                        placeholder="请选择跨行标志"
                                        @change="changeFlag"
                                    >
                                        <el-option
                                            v-for="item in outFlag"
                                            :label="item.label"
                                            :value="item.code"
                                            :key="item.label"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>-->
                            </el-col>
                        </el-row>
                        <!-- <el-row class="text_center">
                            <el-col :span="11" :offset="1">
                                <el-form-item label="转出金额:" prop="OVERPAYAMT" label-position="left">
                                    <el-input placeholder="请输入转出金额" v-model="searchForm.OVERPAYAMT"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item
                                    label-position="left"
                                    prop="shiftIntoCardNo"
                                    label="转入卡卡号:"
                                >
                                    <el-input
                                        placeholder="请输入转入卡卡号"
                                        v-model="searchForm.shiftIntoCardNo"
                                        @blur="checkagain"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="text_center">
                            <el-col :span="11" :offset="1">
                                <el-form-item
                                    label-position="left"
                                    prop="shiftIntoBankNo"
                                    label="申请转入的银行行号:"
                                >
                                    <el-input
                                        placeholder="请输入转入的银行号"
                                        v-model="searchForm.shiftIntoBankNo"
                                        @input="handleInput"
                                        :disabled="outButtonFlag"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item
                                    label-position="left"
                                    prop="shiftIntoBankName"
                                    label="申请转入的银行名称:"
                                >
                                    <el-input
                                        placeholder="请输入转入的银行名称"
                                        v-model="searchForm.shiftIntoBankName"
                                        @input="handleInput"
                                        :disabled="outButtonFlag"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>-->

                        <!-- 话术 -->
                        <div class="hstable_wrap" v-if="speechList.length!=0">
                            <el-table
                                :data="speechList"
                                border
                                stripe
                                header-row-class-name="headerRow"
                                ref="showListTable"
                                class="heard-bg business_table hstable"
                                @selection-change="handleSelectionChange"
                            >
                                <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                                <el-table-column label="业务话术">
                                    <template slot-scope="scope">{{scope.row.content}}</template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <el-row class="buttonBox">
                            <el-button type="primary" size="small" @click="handleClickbtn">修改记录查询</el-button>
                            <el-button type="primary" size="small" @click="handleRollOut">放 弃</el-button>
                        </el-row>
                    </el-form>

                    <!-- 二次确认框 -->
                    <el-dialog
                        v-drag
                        title="溢缴款放弃提示信息"
                        :visible.sync="centerDialogVisible"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            卡号：
                            <span>{{this.searchForm.cardno}}</span>
                        </p>
                        <p>
                            账户类型：
                            <span>{{this.CATEGORY_filter}}</span>
                        </p>
                        <p>
                            溢缴款金额：
                            <span>{{this.OXFRAVALX}}</span>
                        </p>
                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">您确认要放弃吗？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogVisible = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="handerUpdate"
                                icon="el-icon-circle-check"
                                v-preventReClick
                            >确定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { getDictSelectList, getDictMappingValue, getBusinessMenuId } from '@/utils/Common';
import { RegConfig } from '@/utils/RegConfig';

export default {
    name: 'overPayment1',
    components: {
        cardComponent,
    },
    data() {
        const validatorPass = (rule, value, callback) => {
            const overvalue = Number(value);
            console.log('overvalue', overvalue);
            console.log('this.this.OXFRAVALX', this.OXFRAVALX);
            if (parseFloat(overvalue) === 0) {
                callback(new Error('转出金额不能为0，请重新输入!'));
            } else if (parseFloat(overvalue) > parseFloat(this.OXFRAVALX)) {
                callback(new Error('转出金额不能大于溢缴款金额'));
            } else {
                callback();
            }
        };
        return {
            outButtonFlag: true,
            pageLoading: false, // 页面loading
            isShowDialog: false, // 对话框显示控制阀
            bankList: [],
            searchForm: { // 搜索表单字段
                accountType: '个人账户', // 账户类别
                OXFRAVALX: '', // 账面余额金额
                OVERPAYAMT: '',//溢缴款转出金额
                shiftIntoCardNo: '', // 转入卡卡号
                outFlag: '0',
                shiftIntoBankNo: '6440', // 申请转入的银行行号
                shiftIntoBankName: '徽商银行', // 申请转入的银行卡银行名称
                cardno: '',
            },
            // 转出成功信息
            rollOutData: {
                BANKACCT: '', // 申请转入的银行卡号
                OVERPAYAMT: '', // 溢缴款金额
                BANKNO: '', // 申请转入的银行行号
                BANKNAME: '', // 申请转入的银行卡银行名称
            },
            // 表单字段校验规则
            formRules: {
                shiftIntoCardNo: [
                    { required: true, message: '请输入转入卡号', trigger: 'blur' },
                    { pattern: RegConfig.cardNo, message: '请输入13-21位的银行卡账号', trigger: 'blur' },
                ],
                OVERPAYAMT: [
                    { required: true, message: '请输入转出金额', trigger: 'blur' },
                    { pattern: RegConfig.amount, message: '请输入正确的金额', trigger: 'blur' },
                    { validator: validatorPass, trigger: 'blur' },
                ],
                // shiftIntoBankNo: [
                //     { required: true, message: '请输入申请转入的银行行号', trigger: 'blur' },
                // ],
                // shiftIntoBankName: [
                //     { required: true, message: '请选择申请转入的银行卡银行名称', trigger: 'blur' },
                // ],
            },
            OXFRAVALX: '0',
            cardList: [],
            outFlag: [],//跨行标志，0-不跨行，1-跨行
            ifCheckOut: false,//是否显示借记卡验证按钮
            ifPass: '0',//是否通过借记卡验证，0-未通过，1-通过
            checkflag: false,
            ifcheckacct: false,
            speechList: [],//话术列表
            selectedList: [],
            MenuId: '',
            outCard: '',
            bankacctList: [],
            CATEGORY_filter: '',
            centerDialogVisible: false,
            isShowBtm: false,//修改记录查询 按钮是否显示
        };
    },

    created() { },

    // 取缓存信息
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
        AccountionTYPE_INFO: state => state.common.AccountionTYPE_INFO, //账户类别列表
        cardList_3601: state => state.common.cardList_3601, //卡列表
        isCurrentMenuInfo: state => state.menu.isCurrentMenuInfo,
        businessMenu: state => state.menu.businessMenu,
    }),

    async mounted() {
        this.MenuId = this.$route.params.id || '';
        this.outFlag = await getDictSelectList('OUTFLAG', this);
        this.bankacctList = await getDictSelectList('BANKACCT', this);
        await this.init();
    },
    methods: {
        // 初始化方法
        async init() {

            console.log("默认账户类别：" + this.cardInfo_3004.CATEGORY);
            console.log("默认账户：" + this.cardInfo_3004.CARDNO);
            this.searchForm.accountType = this.cardInfo_3004.CATEGORY + '';
            this.CATEGORY_filter = await getDictMappingValue('CATE', this.cardInfo_3004.CATEGORY + '', this);
            //this.searchForm.cardno = this.cardInfo_3004.CARDNO;
            this.changeCardList(this.searchForm.accountType);

            // 获取当前卡账户的信息 跑 3001 交易
            await this.getInitData();

            console.log(" this.searchForm.OXFRAVALX", this.searchForm.OXFRAVALX);
            await this.getspeechList();

            if (this.bankacctList.length !== 0) {
                this.outCard = this.bankacctList[0].code;
            }
            console.log('溢缴款放弃自动转出账户：', this.outCard);
        },
        changeCardList(val) {
            console.log("当前账户类型：" + val);
            this.cardList = [];
            this.cardList_3601.forEach((item) => {
                if (item.CATEGORY + '' === val) {
                    this.cardList.push(item);
                }
            });
            this.searchForm.cardno = this.cardList[0].CARDNBR;

            //切换账户，重新查询3001
            // 获取当前卡账户的信息 跑 3001 交易
            this.getInitData();
        },
        // 获取当前卡账户的信息 跑 3001 交易
        async getInitData() {
            // 设置请求参数 -- 3001 交易
            const appBody = {
                CARDNO: this.searchForm.cardno, // 卡号
                PINFLAG: '0', // 是否检查密码标志 0-不检查
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = '3001';
            params.body.appBody = appBody;

            // 跑 3001 交易
            await this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result -- 3001');
                    if (result.sysHead.rspCd === '000000') {
                        this.searchForm.OXFRAVALX = result.body.appBody.BALNCEFLG === '+' ? result.body.appBody.BALNCE : result.body.appBody.BALNCEFLG + '' + result.body.appBody.BALNCE;
                        console.log(" this.searchForm.OXFRAVALX0", this.searchForm.OXFRAVALX);
                        this.OXFRAVALX = result.body.appBody.BALNCE;
                    } else {
                        // this.$message.error(result.sysHead.rspMsg)
                        this.$alert(result.sysHead.rspMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },
        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            var checkParam = {
                'id': this.MenuId || this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        handleRollOut() {
            if (parseFloat(this.searchForm.OXFRAVALX) >= 0) {
                this.$alert('账户不存在溢缴款！', '提示', {
                    customClass: 'warning', type: 'warning',
                });
                return;
            }
            console.log("this.selectedList.length", this.selectedList.length);
            if (this.selectedList.length != this.speechList.length) {
                this.$alert('话术尚未全部勾选！', '提示', {
                    customClass: 'warning', type: 'warning',
                });
                return;
            }

            this.centerDialogVisible = true;
        },
        // 点击转出 跑 4011 交易
        handerUpdate() {
            this.centerDialogVisible = false;
            //this.pageLoading = true;
            // 设置请求参数 -- 4132 交易
            const appBody = {
                CARDNBR: this.searchForm.cardno, // 卡号
                PINFLAG: this.pinFlag, // 是否检查密码标志 0-不检查
                IDTYPE: this.cardInfo_3004.KEYTYPE, // 证件类型
                CUSTID: this.cardInfo_3004.CUSTID, //证件号码
                CLSFLAG: '4', // 销户标志 1=申请销户 2=最终结清 3=销户申请撤销 4=修改自动结清储蓄账号
                BNKACCT: this.outCard, // 自动结清储蓄账号
                AUTOFLAG: '1', // 溢缴款自动结清申请 0：无 1：申请
                BANKFLAG: '0',// 销户自动结清转账行标志 1-跨行 其他-本行
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = '4011';
            params.body.appBody = appBody;

            // 跑 4132 交易
            this.$post.common.transPort(params).then((res) => {
                //this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result -- 4011');
                    if (result.sysHead.rspCd === '000000') {
                        this.rollOutData = result.body.appBody;

                        this.$alert('溢缴款销户放弃交易成功', '提示', {
                            customClass: 'success', type: 'success',
                        });
                    } else {

                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });


        },
        //修改记录查询
        handleClickbtn() {
            this.MenuId = getBusinessMenuId('/businessSystem/accountCardDetaileQuery', this.businessMenu);
            console.log('this.MenuId____', this.MenuId);
            this.$router.push({ name: 'accountCardDetaileQuery', path: '/businessSystem/accountCardDetaileQuery', params: { id: this.MenuId } });
        },
        // 点击重置搜索表单
        handleReset() {
            this.$refs.searchForm.resetFields();
        },

        // 点击关闭对话空框
        handleCloseDialog() {
            this.isShowDialog = false;
        },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.overPayment1 {
    .searchForm {
        .el-form-item__content {
            text-align: left;
        }
    }
}
</style>
<style scoped lang="scss">
.overPayment1 {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    .buttonBox {
        text-align: center;
        margin: 50px 0 0 0;
        padding-right: 30px;
    }
}

.messageDialog {
    .el-row {
        margin-bottom: 30px;

        .infoItem {
            .title {
                font-weight: 600;
                padding-right: 10px;
            }

            .info {
                color: #999;
            }
        }
    }
}
</style>
